Introduction

By now you are familiar with What Expo is. It’s time to recall and apply your knowledge by creating a React Native application with Expo.

Scenario

You have been asked to create the Little Lemon mobile app in React Native using Expo. To do this, use the command line to install all the necessary tools and set up the project.

Instructions

Part 1: Setting up Expo (if you have already done this, skip to Part 2)

Step 1: Expo account authentication

Begin by running the following command:

npx expo whoami

This command verifies which Expo account is currently authenticated on your machine. If you are not logged in to an Expo account, a message stating “Not logged in” will appear.

An account is not essential to start, and you can proceed further with your project.

Step 2: Register a Expo account

If you want a new Expo account, run the following command to register a new account:

npx expo register

If you already have an Expo account, log in by running the following command:

npx expo login

Step 3: Download Expo Go

Download the Expo Go client app on your Android or iOS device. It allows you to open up apps served through Expo CLI and run your projects much faster when developing them. It’s available on both the Android Play Store and iOS App Store. Reference the links below with version specifications.

• Android Play Store - Requires Android Lollipop (5) or greater

• iOS App Store - Requires iOS 13 or greater

Step 4: Starting the Expo Go app

Great! With the installation complete, you can now open the Expo Go app. If you have created an account with Expo CLI, you can sign in by clicking the Login button in the top header on the Home tab.

Note: Signing in will make it easier for you to open projects in the Expo Go app while developing them. Your projects will appear automatically under the Projects section on the Home tab of the app.

Step 5: Installing an emulator or simulator

Sometimes, it is useful to run your app directly on your computer instead of on a separate physical device. If you would like to set this up, you can learn more about how do so from the following links:

• Installing an Android Emulator

• Installing the iOS Simulator (macOS only) .

Part 2: Setting up your Project

Step 6: Initialize your project

Initialize the React Native project with create-expo-app .

Use the following command:

npx create-expo-app little-lemon && cd little-lemon

Step 7: Run the development server

Start the development server by running the following command:

npx expo start

Note: When you run npx expo start , Expo CLI starts Metro Bundler . This bundler is an HTTP server that compiles the JavaScript code of your app using Babel and serves it to the Expo app. For more information, refer to the Expo Development Server documentation to discover how this works.

Step 8: Opening your app

Open the app on your phone or in a simulator, or emulator:

• On your Android device, press "Scan QR Code" on the "Home" tab of the Expo Go app and scan the QR code that’s in the terminal.

• On your iPhone or iPad, open the default Apple "Camera" app and scan the QR code that’s in the terminal.

If you are using a simulator or an emulator, the following Expo CLI keyboard shortcuts may be useful to open the app on any of the following platforms:

• Pressing a will open in an Android Emulator or connected device .

• Pressing i will open in an iOS Simulator .

Conclusion

In this exercise, you created a new React Native application using the Expo SDK and ran the default application on your own Android or iOS device, or on the emulator or simulator.